<template>
<div class="pt-10">
  <div class="list_box">
    <div class="title">手机验证码登录</div>
    <div class="list_item flex_a_c">
      <input class="flex1" type="mobile" maxlength="11" v-model="form.userName"  placeholder="请输入手机号" />
      <div class="list_txt pr-10" @click="getPhoneCode">
        {{ codeText }}
      </div>
    </div>
    <div class="list_item flex_a_c border_none">
      <input class="flex1 pr-0" v-model="form.code" placeholder-class='inputPlaceHolder' placeholder="请输入验证码" />
    </div>
  </div>
  <div class="flex_center mt-32">
    <div class="btns confirm w_710" @click="onSubmit">提交</div>
  </div>
</div>
</template>
<script setup>
import { getMobileCode, postMoileCodeLogin } from '@/api'
import { reactive, ref, onBeforeUnmount } from 'vue'
import { useStore } from '@/store/index';
import { storeToRefs } from "pinia";
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { debounce } from '@/utils'
let router = useRouter()
let store = useStore()
let form = reactive({
  userName: '',
  code: ''
})

let isClick = ref(true)
let codeText = ref('获取验证码')
let timer = ref(null)
//倒计时
let countDownFun = t => {
  if(t > 0){
    codeText.value = t+"s后重新获取";
    isClick.value = false
    t--;
    timer.value = setTimeout(() =>{countDownFun(t)},1000);
  }else if(t == 0){
    clearTimeout(timer.value)
    isClick.value = true
    codeText.value ="获取验证码";
  }	
}

onBeforeUnmount(() => {
  timer.value && clearTimeout(timer.value)
})
let getPhoneCode = debounce(async function(){
  if (!isClick.value) {
    return false
  }
  // 判断手机号是否合法的正则
  let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
  console.log(reg.test(form.userName))
  if (!form.userName || !reg.test(form.userName)) {
    showToast({
      message: '请输入正确的手机号',
    })
    return false
  }
  isClick.value = false
  const { code, data } = await getMobileCode({ userName: form.userName })
  if (code === 200) {
    countDownFun(60)
  }
}, 300)

let onSubmit = async () => {
  let reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
  if (!form.userName || !reg.test(form.userName)) {
    showToast({
      message: '请输入正确的手机号',
    })
    return false
  }
  if (!form.code) {
    showToast({
      message: '请输入验证码',
    })
    return false
  }
  const { code, data } = await postMoileCodeLogin(form)
  if (code === 200) {
    const { userInfo } = storeToRefs(store)
    store.setAccessToken(data.access_token)
    store.setUserInfo({ ...userInfo.value, ...data })
    router.replace('/')

  }
}
</script>
<style lang="scss" scoped>
.list_box {
  font-size: 13px;
  font-weight: 500;
  color: #666666;
  border-radius: 10px;
  margin: 0px auto 0;
  width: 355px;
  background: #FFFFFF;
  border-radius: 10px;
  padding-top: 27px;
  .list_item {
    padding-left: 15px;
    padding-right: 10px;
    line-height: 62px;
    height: 63px;
    border-bottom: 1px solid #F4F7FC;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    position: relative;
  }
}
.confirm {
  width: 355rpx;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  background: #00B277;
  color: #fff;
}
.title {
  font-family: pf_bold;
  font-size: 22px;
  color: #333333;
  line-height: 30px;
  padding-left: 15px;
  margin-bottom: 24px;
}
.list_item {
  line-height: 63px;
  height: 63px;
  .list_txt {
    color: #666;
  }
}
.w_710 {
  width: 355px;

}
</style>